<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Chart.js最小测试</title>
    <script src="/static/js/simple_chart.js"></script>
</head>
<body>
    <h1>Chart.js最小测试页面</h1>
    <div style="width: 500px; height: 400px;">
        <canvas id="testChart"></canvas>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            console.log('DOM已加载');
            
            // 检查Chart是否已定义
            if (typeof Chart !== 'undefined') {
                console.log('Chart.js已定义');
                
                try {
                    // 创建一个简单的图表
                    const ctx = document.getElementById('testChart').getContext('2d');
                    const chart = new Chart(ctx, {
                        type: 'bar',
                        data: {
                            labels: ['红', '蓝', '黄', '绿', '紫'],
                            datasets: [{
                                label: '示例数据',
                                data: [12, 19, 3, 5, 2],
                                backgroundColor: [
                                    'rgba(255, 99, 132, 0.2)',
                                    'rgba(54, 162, 235, 0.2)',
                                    'rgba(255, 206, 86, 0.2)',
                                    'rgba(75, 192, 192, 0.2)',
                                    'rgba(153, 102, 255, 0.2)'
                                ],
                                borderColor: [
                                    'rgba(255, 99, 132, 1)',
                                    'rgba(54, 162, 235, 1)',
                                    'rgba(255, 206, 86, 1)',
                                    'rgba(75, 192, 192, 1)',
                                    'rgba(153, 102, 255, 1)'
                                ],
                                borderWidth: 1
                            }]
                        },
                        options: {
                            scales: {
                                y: {
                                    beginAtZero: true
                                }
                            }
                        }
                    });
                    console.log('图表创建成功');
                } catch (error) {
                    console.error('创建图表时出错:', error);
                }
            } else {
                console.error('Chart.js未定义');
                
                // 尝试动态加载Chart.js
                var script = document.createElement('script');
                script.src = '/static/js/chart.umd.min.js?v=4';
                script.onload = function() {
                    console.log('Chart.js动态加载成功');
                    if (typeof Chart !== 'undefined') {
                        alert('Chart.js最终加载成功！');
                    } else {
                        alert('Chart.js加载失败');
                    }
                };
                script.onerror = function() {
                    console.error('Chart.js动态加载失败');
                    alert('Chart.js动态加载失败');
                };
                document.head.appendChild(script);
            }
        });
    </script>
</body>
</html>